<template>
  <div id="app" class="chat-container">
    <div class="border-container">
      <div v-for="(message, index) in messages" :key="index" class="message-container">
        <div v-if="message.role === 'USER'" >
          <span>您：</span>
          <p class="user-message">{{ message.content }}</p>
        </div>
        <div v-else-if="message.role === 'ASSISTANT'">
          <span>智能助手：</span>
          <p  class="assistant-message">{{ message.content }}</p>
        </div>
      </div>
    </div>

    <div class="input-container">
      <input type="text" v-model="userInput" @keyup.enter="sendMessage" class="input-field">
      <button @click="sendMessage" class="send-button">发送</button>
    </div>
    <div v-if="showOverlay" class="overlay">
      <div class="loader"></div> <!-- 加载图标 -->
    </div>
  </div>
</template>

<script>
	import {
		getAnswer
	} from "@/api/hmy/professor";
export default {
  data() {
    return {
      messages: [], // 存储对话消息的数组
      userInput: '', // 用户输入的消息
	  showOverlay: false, // 控制遮罩层显示
    };
  },
  mounted() {
    // 页面加载时从本地存储中获取对话记录
    const savedMessages = localStorage.getItem('chatMessages');
    if (savedMessages) {
      this.messages = JSON.parse(savedMessages);
    }
  },
  methods: {
    // 发送消息
    sendMessage() {
      if (this.userInput.trim() === '') return; // 如果消息为空则不发送

      // 显示遮罩层
      this.showOverlay = true;

      this.messages.push({ role: 'USER', content: this.userInput }); // 将用户发送的消息添加到对话数组中

      // 调用人工智能接口，将用户输入的消息发送给后端处理
      try {
        // 设置超时时间为60秒（60000毫秒）
        const timeoutPromise = new Promise((resolve, reject) => {
          setTimeout(() => {
            reject(new Error('Request timed out'));
          }, 60000);
        });

        // 发送消息并等待回复，同时设置超时
        Promise.race([getAnswer(this.userInput), timeoutPromise])
          .then(response => {
            // 将助手的回复添加到对话数组中
            this.messages.push({ role: 'ASSISTANT', content: response.output.choices[0].message.content });
            localStorage.setItem('chatMessages', JSON.stringify(this.messages));
          })
          .catch(error => {
            console.error('Error:', error);
            if (error.message === 'Request timed out') {
              // 处理超时错误
              this.$message.error('Request timed out. Please try again later.');
            } else {
              // 处理其他错误
              this.$message.error('An error occurred. Please try again.');
            }
          })
          .finally(() => {
            // 隐藏遮罩层
            this.showOverlay = false;
          });
      } catch (error) {
        console.error('Error:', error);
        // 弹出消息提示
        this.$message.error('An error occurred. Please try again.');
        // 隐藏遮罩层
        this.showOverlay = false;
      }
    }


  }
};
</script>

<style>
/* 对话框容器样式 */
.chat-container {
  width: 100%;
//height: 600px; /* 将高度设置为视口高度 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: Arial, sans-serif;
}
/*会话框区域*/
.border-container{
  width: 90%;
  overflow: auto;
  height: 480px;
}
/* 消息容器样式 */
.message-container {
  margin-bottom: 10px;
}
/* 用户消息样式 */
.user-message {
  background-color: #00afff;
  color: #fff;
  padding: 10px;
  border-radius: 5px;
  max-width: 90%;
  margin-left: 0; /* 调整用户消息的左边距 */
  margin-right: auto; /* 用户消息向左浮动 */
}
/* 助手消息样式 */
.assistant-message {
//text-align: right;
  background-color: #F0F0F0;
  color: #333;
  padding: 10px;
  border-radius: 5px;
  max-width: 90%;
  margin-left: 0; /* 调整助手消息的左边距 */
  margin-right: auto; /* 助手消息向右浮动 */
}

/* 输入框容器样式 */
.input-container {
  position: absolute;
  bottom: 5px;
  display: flex;
  align-items: center;
  width: 90%;
  height:15%;
  margin-right: 5%;
}

/* 输入框样式 */
.input-field {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  flex: 1;
  height: 50px;
}

/* 发送按钮样式 */
.send-button {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  background-color: #007bff;
  color: #fff;
  cursor: pointer;
  margin-left: 10px;
}

/* 遮罩层样式 */
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.5); /* 半透明白色 */
  z-index: 999; /* 确保遮罩层在最顶层 */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 加载图标样式 */
.loader {
  border: 8px solid #f3f3f3; /* Light grey */
  border-top: 8px solid #3498db; /* Blue */
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>
